<%--
  Created by IntelliJ IDEA.
  User: 86135
  Date: 2022/3/17
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-color: papayawhip;
    }
    #student{
      border: rosybrown solid;
      width: 900px;
      text-align: center;
      margin-left: 300px;
      margin-top: 100px;

    }
    tr,td{
      border: wheat solid;

    }

    #bt,#bt1,#bt2,#bt3,#bt4{
      height: 40px;
      width: 90px;
    }
    #oo{
      height: 40px;
      width: 65px;
    }
    #ss{
      margin-top: 100px;
      margin-left: 300px;
    }
    .pagination{
      margin-left: 300px;
    }
    #fff{
      margin-left: 300px;
    }

  </style>


  <script type="text/javascript">
    function searchId(){
      alert("确认查询？");
      var input, filter, table, tr, td, i;
      input = document.getElementById("sphone");
      filter=input.value;
      table = document.getElementById("student");
      tr = table.getElementsByTagName("tr");
      //alert(input.value);

      // 循环表格每一行，查找匹配项
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td){
          if (td.innerHTML===filter) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";

          }
        }
      }

    }
    function searchtime(){
      alert("确认查询？");
      var input,table,tr,td,i,filter;
      input=document.getElementById("date");
      filter = input.value;
      table=document.getElementById("student");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[3];
        if (td) {
          if (td.innerHTML==filter) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";

          }
        }
      }

    }
    function searchp(){
      alert("确认查询？");
      var input,table,tr,td,i,filter;
      input=document.getElementById("");
      filter = input.value;
      table=document.getElementById("student");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[4];
        if (td) {
          if (td.innerHTML==filter) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";

          }
        }
      }

    }

    function myFunction() {
      // 声明变量
      alert("确认查询？");
      var input, filter, table, tr, td, i;
      input = document.getElementById("sname");
      filter = input.value.toUpperCase();
      table = document.getElementById("student");
      tr = table.getElementsByTagName("tr");

      // 循环表格每一行，查找匹配项
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";

          }
        }
      }


    }



    function display(id){
      var target=document.getElementById(id);
      if(target.style.display=="none"){
        target.style.display="";
      }
      else
      {
        target.style.display="none";
      }
    };




    function dddd(){
      var db=document.getElementById("ddd");
      window.location.href="index.jsp";
    }



  </script>
</head>
<body>
<marquee bgcolor="#FFCC99" behavior="alternate"><font size ="10" color="#a52a2a">** Look and Search Here **</font></marquee>
<h2 align="center">学生信息展示查询界面</h2>
<h3 align="center">Display the student information</h3>
<div id="ss">
  <input type="text" id="sname" placeholder="输入姓名"><!--input-->
  <input type="text" id="sphone" placeholder="输入学号"><!--input-->
  <input type="text" id="date" placeholder="输入学期数">
  <input type="text" id="attitude" placeholder="输入在籍状态(A或L)">
  </select>
  <br><br>
  <input type="button" value="按姓名查询"  id="bt" onclick="myFunction()">
  <input type="button" value="按学号查询" id="bt2" onclick="searchId()">
  <input type="button" value="按状态查询" id="bt3" onclick="searchp()">
  <input type="button" value="按学期数查询" id="bt4" onclick="searchtime()">
  <input type="button" value="返回主页面" id="bt1" onclick="dddd()">
</div>


<table cellspacing=0 id="student">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>手机号</th>
    <th>学期数</th>
    <th>在籍状态</th>
  </tr>
  <tr>
    <td>20205355</td>
    <td>Tom3</td>
    <td>1501646899</td>
    <td>3</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20028184</td>
    <td>Jack1</td>
    <td>1506382522</td>
    <td>3</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20169099</td>
    <td>Jesson4</td>
    <td>1506344287</td>
    <td>2</td>
    <td>A</td>
  </tr>
  <tr>
    <td>20088353</td>
    <td>Jesson4</td>
    <td>1501972376</td>
    <td>1</td>
    <td>L</td>
  </tr>
  <tr>
    <td>19995842</td>
    <td>Tom3</td>
    <td>1495981365</td>
    <td>6</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20042779</td>
    <td>Eva0</td>
    <td>1501069929</td>
    <td>1</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20114802</td>
    <td>Marry2</td>
    <td>1510141914</td>
    <td>7</td>
    <td>A</td>
  </tr>
  <tr>
    <td>20147160</td>
    <td>Jack1</td>
    <td>1501955738</td>
    <td>4</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20182663</td>
    <td>Jack1</td>
    <td>1503073207</td>
    <td>3</td>
    <td>L</td>
  </tr>
  <tr>
    <td>19988429</td>
    <td>Jack1</td>
    <td>1509543822</td>
    <td>3</td>
    <td>L</td>
  </tr>
  <tr>
    <td>20117851</td>
    <td>Jesson4</td>
    <td>1511684439</td>
    <td>2</td>
    <td>A</td>
  </tr>
  <tr>
    <td>200883530</td>
    <td>Jession4</td>
    <td>1501972376</td>
    <td>1</td>
    <td>L</td>
  </tr>
  <tr>
    <td>19995842</td>
    <td>Tom3</td>
    <td>1495981365</td>
    <td>6</td>
    <td>L</td>
  </tr>
</table>
<div class="pagination" id="fff">
  <a href="#" class="prev"><</a>
  <a href="#" class="num active">首页</a>
  <a href="#" class="num active">下一页</a>
  <a href="#" class="num active">尾页</a>
  <a href="#" class="next"><<</a>
</div>
</body>
</html>